<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view style="margin: 20rpx;">
			<view style="margin-bottom: 20rpx;display: flex;">
				<view style="flex:auto">
					<button @click="modeChange">输入签号 （ 1 - 100 ）</button>
				</view>
				<view style="flex-basis: 10px;" v-if="Index!=''"></view>
				<view style="flex:auto" v-if="Index!=''">
					<button @click="imageShare">分享</button>
				</view>
			</view>
			<view v-if="InputMode">
				<view style="margin: 50rpx;">
					<text style="color: gray;">输入签号</text>
				</view>
				<view style="margin: 10rpx;">
					<text style="color: beige;">请在下面的输入框内输入要显示的签号</text>
				</view>
				<input v-model="InputValue" placeholder="点击这里输入签号" type="number" :max="100" :min="1" :maxlength="3"
					class="input" />
				<view style="height: 50px;"></view>
				<button @click="modeChanged">显示</button>
			</view>
		</view>
		<view v-if="Index!='' && !InputMode" style="flex-grow: 1;display: flex;flex-direction: column;">
			<image style="flex-grow: 1; width: auto;" :src="'/static/lingqian/'+Index+'b.jpg'" mode="aspectFit">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Index: "",
				Title: "灵签解释",
				InputMode: false,
				InputValue: "",
				imageClass: "",
			}
		},
		onLoad() {
			let info = uni.getWindowInfo();
			if (info.windowWidth < info.screenHeight) {
				this.imageClass = 'img90deg';
			}
		},
		methods: {
			modeChange() {
				this.InputMode = !this.InputMode;
			},
			modeChanged() {
				let value = parseInt(this.InputValue);
				if (isNaN(value)) {
					uni.showToast({
						title: "输入非数字"
					});
					return;
				}
				if (value > 100 || value < 1) {
					uni.showToast({
						title: "输入必须在一到100之间"
					})
				}
				this.InputValue = value.toString();
				if (value < 10) {
					this.Index = '00' + this.InputValue;
				} else if (value >= 100) {
					this.Index = this.InputValue;
				} else {
					this.Index = '0' + this.InputValue;
				}
				this.InputMode = false;
				uni.setNavigationBarTitle({
					title: "灵签 " + this.Index
				})
			},
			imageShare() {
				if (this.InputValue == null || this.InputValue == "") return;
				uni.getImageInfo({
					src: "/static/lingqian/" + this.Index + "a.jpg",
					success: (ret) => {
						plus.share.sendWithSystem({
							content: "观音灵签 第" + this.InputValue + "签",
							pictures: ["/static/lingqian/" + this.Index + "a.jpg"]
						}, () => {
							uni.showToast({
								title: "分享成功"
							})
						}, ret1 => {
							uni.showModal({
								title: "分享失败",
								content: JSON.stringify(ret1),
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #000000;
	}

	.imgdiv {
		width: 100%;
		height: 100%;
		margin: auto;
	}

	.img90deg {
		transform: rotate(90deg);
	}

	.input {
		margin: 5rpx;
		margin-top: 50rpx;
		font-size: 30px;
		color: chartreuse;
	}
</style>